<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import gdglService from '@/api/gdgl'
import wtj from './components/wtj.vue'
import ytj from './components/ytj.vue'
import yth from './components/yth.vue'
import tgz from './components/tgz.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const emits = defineEmits(['addTgjlTab'])
defineProps({
  optionsObj: {
    type: Object,
    default: () => ({}),
  },
})

onMounted(() => {
  getSl()
})

// ref
const wtjRef = ref<InstanceType<typeof wtj>>()
const ytjRef = ref<InstanceType<typeof ytj>>()
const ythRef = ref<InstanceType<typeof yth>>()
const tgzRef = ref<InstanceType<typeof tgz>>()

/*
 * tabs切换
 */
const headerIndex = ref(0)
const headerClickChange = (value: number) => {
  if (headerIndex.value === value) return
  headerIndex.value = value
}
const tabMap: { [key: string]: number } = {
  wtj: 0,
  ytj: 1,
  yth: 2,
  tgz: 3,
}
const prePage = route.query.prePage as string
if (['wtj', 'yth', 'tgz', 'ytj'].includes(prePage)) {
  headerClickChange(tabMap[prePage])
}
// 调用子组件方法
const getTableList = () => {
  getSl()
}

/**
 * 获取数量
 */
const wtjSl = ref<number>(0)
const ytjSl = ref<number>(0)
const ythSl = ref<number>(0)
const tgzSl = ref<number>(0)
const getSl = () => {
  // 案件归档待归档案件数量
  gdglService
    .getAjgddgdajsl()
    .then((res) => {
      wtjSl.value = res.data.wtjsl
      ytjSl.value = res.data.ytjsl
      ythSl.value = res.data.ythsl
      tgzSl.value = res.data.tgzsl
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 切换退改记录（调父组件方法）
 */
const goTgjl = (data: any) => {
  emits('addTgjlTab', data)
}
</script>
<template>
  <div class="container">
    <div class="dgd-header">
      <button
        class="header-text"
        :class="headerIndex === 0 ? 'header-avtive' : ''"
        @click="headerClickChange(0)"
      >
        未提交({{ wtjSl }})
      </button>
      <button
        class="header-text"
        :class="headerIndex === 1 ? 'header-avtive' : ''"
        @click="headerClickChange(1)"
      >
        已提交({{ ytjSl }})
      </button>

      <button
        class="header-text"
        :class="headerIndex === 2 ? 'header-avtive' : ''"
        @click="headerClickChange(2)"
      >
        已退回({{ ythSl }})
      </button>
      <button
        class="header-text"
        :class="headerIndex === 3 ? 'header-avtive' : ''"
        @click="headerClickChange(3)"
      >
        退改中({{ tgzSl }})
      </button>
    </div>
    <div class="tabs-active">
      <!-- @refresh="getSl" -->
      <wtj
        ref="wtjRef"
        v-if="headerIndex === 0"
        :optionsObj="optionsObj"
        @refresh="getTableList"
      ></wtj>
      <ytj
        ref="ytjRef"
        v-if="headerIndex === 1"
        :optionsObj="optionsObj"
        @refresh="getTableList"
      ></ytj>
      <yth
        ref="ythRef"
        v-if="headerIndex === 2"
        :optionsObj="optionsObj"
        @refresh="getTableList"
      ></yth>
      <tgz
        ref="tgzRef"
        v-if="headerIndex === 3"
        :optionsObj="optionsObj"
        @refresh="getTableList"
        @addTgjlTab="goTgjl"
      ></tgz>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .dgd-header {
    padding: 0px 0px 15px 0px;
    .header-text {
      color: #4a76ab;
    }
    .header-text + .header-text {
      margin-left: 10px;
    }
    .header-avtive {
      color: #fff;
      background-color: #3c89d0;
    }
  }

  .tabs-active {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }
}
</style>
